<template>
  <div>
    <h3>
        watch 侦听器的用法
    </h3>
    <!-- <input type="text" class="form-control" v-model.trim="username" > -->
    <input type="text" class="form-control" v-model.trim="info.username" >
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return {
            username:'admin',
            info:{
                username:'zs',
                age:20
            }
        }
    },
    watch:{
        // async username(newVal,oldVal){
        //     // console.log(newVal,oldVal)
        //     const { data:res }=await axios.get('https://www.escook.cn/api/finduser/'+newVal)
        //     console.log(res)
        // }

        // username:{
        //     async handler(newVal,oldVal){
        //         const { data:res }=await axios.get('https://www.escook.cn/api/finduser/'+newVal)
        //         console.log(res)
        //     },
        //     immediate:true //在创建侦听器时，立即执行一遍回调
        // }

        // 深度侦听
        // 当 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项
        // 这种方式所有属性发生变化都会触发侦听器
        // info:{
        //     async handler(newVal){
        //         const { data:res }=await axios.get(`https://www.escook.cn/api/finduser/${newVal.username}`)
        //         console.log(res)
        //     },
        //     immediate:true,
        //     deep:true
        // }

        // 侦听对象单个属性的变化
        "info.username":{
            async handler(newVal){
                 const { data:res }=await axios.get(`https://www.escook.cn/api/finduser/${newVal.username}`)
                 console.log(res)
            },
            immediate:true
        }

    }
}
</script>

<style>

</style>